<template>
  <div class="brand" v-for="(index, item) in row" track-by="$index">
    <div class="item" v-for="item in selectDataBrand(index)">
      <div class="brand_icon" v-touch:tap.stop.prevent="go(item.url)" v-if="item != ''">
        <img :src="item.logo" alt="">
      </div>
      <div class="brand_text"  v-if="item != ''">{{ item.name }}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        dataBrand: window._dataBrand || []
      }
    },
    computed: {
      row() {
        return Math.ceil(this.dataBrand.length / 5);
      }
    },
    methods: {
      go(url) {
        if (url) {
          window.location.href = url;
        }
      },
      selectDataBrand(i) {
        let arr = this.dataBrand.slice(i * 5, i * 5 + 5);
        if (arr.length < 5) {
          for (let i = 0, len = 5 - arr.length; i < len; i++) {
             arr.push('');
          }
        }
        return arr;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .brand
    height: 109px
    /*display: flex*/
    /*justify-content: space-between*/
    display: table
    width: 100%
    .item
      padding-top: 20px
      display: table-cell
      width: 20%
      /*flex: 1 0 50px*/
      text-align: center
      .brand_icon
        display: inline-block
        width: 50px
        height: 50px
        vertical-align: top
        cursor: pointer
        overflow: hidden
        img
          display: block
          width: 100%
          height: 100%
      .brand_text
        margin-top: 7px
        font-size: 14px
        height: 20px
        line-height: 20px
</style>